<template>
  <div>
    <div
      id="main"
      style="
        width: 1535px;
        box-sizing: border-box;
        padding: 10px 220px 70px;
        background-color: #f0f0f0;
      "
    >
      <!-- 平台小店 -->
      <!-- <img src="@/assets/img/平台小店.png" width="170" alt="" /> -->
      <div class="main-head">
        <img src="@/assets/img/小店1.png" width="150" alt="" />
        <div>
          <el-input v-model="searchForm.shangpinmingcheng" placeholder="搜一下" clearable></el-input>
          <el-button type="primary" @click="searchCommodity">搜 索</el-button>
        </div>
      </div>

      <div>
        <div id="commodity" style="display: flex; flex-wrap: wrap">
          <div class="item-one" v-for="(item, index) in dataList" :key="index">
            <img
              class="item-img Deepening"
              :src="item.tupian"
              alt=""
              width="220"
              height="220"
              @click="detilCommodity(item)"
            />
            <div>
              <h2 style="color: #f00; line-height: 45px">￥{{ item.price }}</h2>
              <h5 style="color: #000">{{ item.shangpinmingcheng }}</h5>
              <font style="color: #800; line-height: 35px">{{
                item.pinpai
              }}</font>
              <!-- <div v-html="item.shangpinxiangqing"></div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalPage: "",
      searchForm: {},
      imgUrlList: [],
      dataList: [],
    };
  },
  created() {
    this.init();
    this.getDataList();
  },
  mounted() {},
  methods: {
    init() {},
    // 查询所有商品
    getDataList() {
      this.dataListLoading = true;
      let params = {
        page: this.pageIndex,
        limit: 8,
        sort: "id",
      };
      if (this.searchForm.shangpinmingcheng != "" && this.searchForm.shangpinmingcheng != undefined) {
        params["shangpinmingcheng"] = "%" + this.searchForm.shangpinmingcheng + "%";
      }
      this.$http({
        url: "chongwuyongpin/list",
        method: "get",
        params: params,
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.data.list;
          this.totalPage = data.data.total;
          console.log(this.dataList);
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    detilCommodity(item){
      console.log(item)
      this.$router.push({
        path: "/detileCommoity",
        query: { item },
      });
    },
    searchCommodity() {
      this.getDataList();
    },
  },
};
</script>

<style lang="scss" scoped>
.main-head {
  display: flex;
  div {
    width: 450px;
    // height: 50px;
    display: flex;
    align-self: center;
    margin: 0 auto;
    .el-input {
      margin-right: 10px;
    }
  }
}
.item-one {
  width: 230px;
  height: 380px;
  margin-right: 50px;
  margin-top: 40px;
  text-align: left;
  border: 2px solid #ffffff;
  // 超出后换行
  word-wrap: break-word; // 在长单词或URL地址内部进行换行
  word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
  overflow: hidden;
}
.item-one:nth-child(4n + 4) {
  margin-right: 0;
}

/* 动效 */
.Deepening:hover {
  animation: toDeep 0.5s ease 0s forwards;
}

@keyframes toDeep {
  100% {
    transform: scale(1.01);
    -webkit-box-shadow: 10px 10px 20px #222;
    -moz-box-shadow: 10px 10px 20px #222;
    box-shadow: 10px 10px 20px #222;
  }
}

.item-img {
  width: 220px;
  height: 220px;
  margin: 0 5px;
  background-repeat: no-repeat;
  background-size: 100%;
  -webkit-box-shadow: 5px 5px 5px #444;
  -moz-box-shadow: 5px 5px 5px #444;
  box-shadow: 5px 5px 5px #444;
  cursor: pointer;
}
</style>